<template>
    <div class="hd-upload">
      <!-- 显示图片部分 -->
      <div class="hd-upload-card-img" v-for="(item, index) in imgArr" :key="index">
        <img :src="item">
        <div class="hd-upload-card-img-bash" @click="deleteImage(index)">
          <i class="yd-icon-home"></i>
        </div>
      </div>
      <!-- 自定义上传组件 -->
      <div class="hd-upload-card hd-upload-card-a">
        <i class="yd-icon-star" style="font-size: 0.6rem; color: rgb(255, 104, 93);"></i>
        <hd-upload @filesChange="imageChange"/>
      </div>
    </div>
  </div>
</template>
<style lang="stylus" scoped>
.hd-upload
  display flex
  width 100%
  flex-flow wrap
.hd-upload-card
  position relative
  flex 0 0 32%
  box-sizing border-box
  border 1px dashed #c0ccda
  background-color #fbfdff
  border-radius 6px
  text-align center
  margin .05rem
.hd-upload-card-img
  position relative
  flex 0 0 32%
  margin .05rem
  height 2.4rem
  img
    height 100%
    width 100%
    border 1px solid #ebebeb
  &-bash
    position absolute
    bottom 0
    background-color rgba(88, 88, 88, 0.73)
    color #ffffff
    width 100%
    height .5rem
    text-align center
    font-size .4rem
.hd-upload-card-a
  line-height 2.2rem
.hd-img-auto
  width 100%
  height 100%
</style>
<script>
// import hdUpload from './hdupload'
export default {
  // components: {
    // hdUpload
  // },
  name: 'h5Upload',
  data() {
    return {
      imgArr: []
    }
  },
  methods: {
    /**
     * 返回图片
     * @files 文件对象
     * @srcs 图片 src 数组
     */
    imageChange(files) {
      const reader = new FileReader();
      // 读取图片
      reader.onload = (e) => {
        let src = e.target.result;
        // 添加图片预览
        this.addImage(src)
      }
      reader.readAsDataURL(files[0]);
    },
    // 添加图片
    addImage(src) {
      // 赋值给 img 以 base64 形式显示
      this.imgArr.push(src)
    },
    // 删除图片
    deleteImage(index) {
      // 删除图片
      this.imgArr.splice(index, 1)
    }
  }
}
</script>

